<template>
  <div id="siteMap">
    <div class="siteMap_title">网站地图</div>
    <div class="siteMap_list" v-for="(list,index) in listData" key="index">
      <div class="siteMap_phot">
        <img class="main_bg" :src="list.thumbPic" :alt="list.title"/>
      </div>
      <div class="siteMap_content">
        <h5>{{list.title}}</h5>
        <ul v-if="list.children.length>0">
          <li v-for="(child,item) in list.children">
            <a :href="child.url">{{child.title}}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  let listdata = [{
    title: '传给雅昌',
    thumbPic: 'http://image2.artup.com/static/pc/help/sitemap01.png',
    children: [{
      title: '画册定制',
      url: '/print/album.html'
    }, {
      title: '框画定制',
      url: '/print/frame.html'
    }, {
      title: '海报定制',
      url: '/print/poster.html'
    }, {
      title: '挂历定制',
      url: '/print/calendars.html?category=guali&defDbId=d86b43b8-b496-11e7-ab6d-c88d8360f6c1'
    }, {
      title: '功能介绍',
      url: ''
    }]
  }, {
    title: '艺术画册',
    thumbPic: 'http://image2.artup.com/static/pc/help/sitemap02.png',
    children: [{
      title: '画册定制',
      url: '/print/album.html'
    }, {
      title: '画册装帧',
      url: '/print/album.html'
    }, {
      title: '画册介绍',
      url: '/print/album.html'
    }]
  }, {
    title: '磁贴画',
    thumbPic: 'http://image2.artup.com/static/pc/help/sitemap03.png',
    children: [{
      title: '磁贴画定制',
      url: '/print/magnetic.html'
    }, {
      title: '磁贴画工艺',
      url: '/print/magnetic.html'
    }, {
      title: '磁贴画介绍 ',
      url: '/print/magnetic.html'
    }]
  }, {
    title: '框画',
    thumbPic: 'http://image2.artup.com/static/pc/help/sitemap04.png',
    children: [{
      title: '框画定制',
      url: '/print/frame.html'
    }, {
      title: '框画工艺',
      url: '/print/frame.html'
    }, {
      title: '框画介绍 ',
      url: '/print/frame.html'
    }]
  }, {
    title: '艺术合集',
    thumbPic: 'http://image2.artup.com/static/pc/help/sitemap05.png',
    children: [{
      title: '艺术合集定制',
      url: '/print/set.html'
    }, {
      title: '艺术合集工艺',
      url: '/print/set.html'
    }, {
      title: '艺术合集介绍 ',
      url: '/print/set.html'
    }]
  }, {
    title: '艺术海报',
    thumbPic: 'http://image2.artup.com/static/pc/help/sitemap06.png',
    children: [{
      title: '海报定制',
      url: '/print/poster.html'
    }, {
      title: '视觉展示',
      url: '/print/poster.html'
    }, {
      title: '海报工艺 ',
      url: '/print/poster.html'
    }]
  }, {
    title: '方画册',
    thumbPic: 'http://image2.artup.com/static/pc/help/sitemap07.png',
    children: [{
      title: '方画册定制',
      url: '/print/square.html'
    }, {
      title: '主题展示',
      url: '/print/square.html'
    }, {
      title: '制作工艺 ',
      url: '/print/square.html'
    }]
  }, {
    title: '拾光集',
    thumbPic: 'http://image2.artup.com/static/pc/help/sitemap08.png',
    children: [{
      title: '拾光集定制',
      url: '/print/memory.html'
    }, {
      title: '视觉展示',
      url: '/print/memory.html'
    }, {
      title: '制作工艺 ',
      url: '/print/memory.html'
    }]
  }, {
    title: '小时光',
    thumbPic: 'http://image2.artup.com/static/pc/help/sitemap09.png',
    children: [{
      title: '小时光定制',
      url: '/print/babytime.html'
    }, {
      title: '视觉展示',
      url: '/print/babytime.html'
    }, {
      title: '制作工艺  ',
      url: '/print/babytime.html'
    }]
  }, {
    title: '家 . 书',
    thumbPic: 'http://image2.artup.com/static/pc/help/sitemap10.png',
    children: [{
      title: '家书定制',
      url: '/print/family.html'
    }, {
      title: '视觉展示',
      url: '/print/family.html'
    }, {
      title: '制作工艺  ',
      url: '/print/family.html'
    }]
  }, {
    title: '艺术台历',
    thumbPic: 'http://image2.artup.com/static/pc/help/sitemap11.png',
    children: [{
      title: '台历定制',
      url: '/print/deskdiary.html'
    }, {
      title: '视觉展示',
      url: '/print/deskdiary.html'
    }, {
      title: '制作工艺  ',
      url: '/print/deskdiary.html'
    }]
  }, {
    title: '艺术挂历',
    thumbPic: 'http://image2.artup.com/static/pc/help/sitemap12.png',
    children: [{
      title: '挂历定制',
      url: '/print/calendars.html'
    }, {
      title: '视觉展示',
      url: '/print/calendars.html'
    }, {
      title: '制作工艺  ',
      url: '/print/calendars.html'
    }]
  }]

  export default {
    data() {
      return {
        listData: listdata,
        currentLi: null
      }
    },
    watch: {
      '$route'(to, from) {
        this.currentLi = to.path
      }
    },
    created() {
      this.currentLi = this.$route.path
    },
    components: {},
    methods: {},

    mounted() {

    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass" scoped>
  #siteMap {
    width: 100%;
    height: auto;
    color: #fff;
    font-family: "微软雅黑";
    font-size: 14px;
    box-sizing: border-box;
    display: block;
    padding-bottom: 76px;

    .siteMap_title {
      width: 100%;
      line-height: 30px;
      border-bottom: 1px solid #5b5b5b;
    }

    .siteMap_list {
      width: 100%;
      height: 76px;
      overflow: hidden;
      margin-top: 40px;

      .siteMap_phot {
        position: relative;
        width: 76px;
        height: 76px;
        padding: 15px;
        box-sizing: border-box;
        float: left;

        img {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          max-height: 100%;
          max-width: 100%;
          margin: auto auto;
          display: block;
        }

      }
      .siteMap_content {
        width: 525px;
        float: left;
        height: 76px;

        > h5 {
          width: 525px;
          height: 40px;
          line-height: 30px;
          display: block;
          padding-top: 10px;
          box-sizing: border-box;
          text-indent: 22px;
          font-size: 14px;
          line-height: 30px;
          font-family: "微软雅黑";
          color: #fff;
        }

        ul {
          width: 525px;
          height: 36px;
          line-height: 30px;

          li {
            width: 105px;
            text-align: left;
            float: left;
            cursor: pointer;
            padding: 0 10px 0 20px;
            box-sizing: border-box;

            a {
              color: #fff;
              font-size: 14px;
              line-height: 30px;
              font-family: "微软雅黑";
            }

          }
        }
      }
    }
  }
</style>
